<template>
	<view>
		<view class="topbg">
			
		</view>
		<view class="content margin-bottom">
			<view class="margin-xl panel top-50">
				<view style="color: #4CA5FE;">以税前工资为基数应缴纳的社保费用明细</view>
				<!-- 一般用法 -->
				<uni-collapse >
				    <uni-collapse-item title="个人缴纳" :subTitle="resultList.pbefore_total">
						<view class="cu-list menu">
							<view class="cu-item " v-for="(item,index) in resultList.personal_before" :key="index">
								<view class="content">
									<text class="">{{item.name}}</text>
								</view>
								<view class="action"><text class=" text-sm">{{item.value}}</text></view>
							</view>
						</view>
				    </uni-collapse-item>
				   
				</uni-collapse>
				<view class="line"></view>
				<uni-collapse class="margin-top-xs">
				    <uni-collapse-item title="企业缴纳" :subTitle="resultList.cbefore_total">
						<view class="cu-list menu">
							<view class="cu-item " v-for="(item,index) in resultList.company_before" :key="index">
								<view class="content">
									<text class="">{{item.name}}</text>
								</view>
								<view class="action"><text class=" text-sm">{{item.value}}</text></view>
							</view>
						</view>
				    </uni-collapse-item>
				   
				</uni-collapse>
			</view>
			<view class="margin-xl panel">
				<view style="color: #4CA5FE;">以实际购买社保的基数应缴纳的社保费用明细</view>
				<!-- 一般用法 -->
				<uni-collapse >
					<uni-collapse-item title="个人缴纳" :subTitle="resultList.preal_total">
						
						<view class="cu-list menu">
							<view class="cu-item " v-for="(item,index) in resultList.personal_real" :key="index">
								<view class="content">
									<text class="">{{item.name}}</text>
								</view>
								<view class="action"><text class=" text-sm">{{item.value}}</text></view>
							</view>
						</view>
				    </uni-collapse-item>
				
				</uni-collapse>
				<view class="line"></view>
				<uni-collapse class="margin-top-xs ">
				    <uni-collapse-item title="企业缴纳" :subTitle="resultList.creal_total">
						<view class="cu-list menu">
							<view class="cu-item " v-for="(item,index) in resultList.company_real" :key="index">
								<view class="content">
									<text class="">{{item.name}}</text>
								</view>
								<view class="action"><text class=" text-sm">{{item.value}}</text></view>
							</view>
						</view>
				    </uni-collapse-item>
				   
				</uni-collapse>
			</view>
			<view class="cu-list menu margin-xl result-list">
				
				<view class="result ">社保缴纳差异：</view>
				<view class="cu-item ">
					<view class="content">
						<text class="">个人缴纳差异</text>
					</view>
					<view class="action"><text class=" text-sm">{{resultList.personal_different}}</text></view>
				</view>
				<view class="cu-item ">
					<view class="content">
						<text class="">企业缴纳差异</text>
					</view>
					<view class="action"><text class=" text-sm">{{resultList.company_different}}</text></view>
				</view>
				
			</view>
			<!-- <image class="bottom-img" src="../../../static/images/shebao.jpg"></image> -->
		</view>
		
	</view>
</template>

<script>
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	
	export default {
	    components: {uniCollapse,uniCollapseItem},
		data() {
			return {
				resultList:[],
				modalName: null,
				gridCol: 3,
				gridBorder: false,
				menuBorder: false,
				menuArrow: false,
				menuCard: false,
				skin: false,
				listTouchStart: 0,
				listTouchDirection: null,
			};
		},
		onLoad() {
			this.getResult();
		},
		methods: {
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			async getResult(){
				let param = uni.getStorageSync('socialParam') ;
				// let data = await this.$http.post('fiveRisks',{city:'重庆市',wages_before:'10000',wages_real:'6000'});
				let data = await this.$http.post(
					'fiveRisks', //可以直接放链接(将不启用全局定义域名)
					param, 
					{
						isPrompt: true,//（默认 true 说明：本接口抛出的错误是否提示）
						load: true,//（默认 true 说明：本接口是否提示加载动画）
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
						isFactory: true //（默认 true 说明：本接口是否调用公共的数据处理方法，设置false后isPrompt参数将失去作用）
					}
				);
				this.resultList = data;
				console.log(data);
			},
		}
	}
</script>

<style lang="scss">
	.page {
		height: 100Vh;
		width: 100vw;
		background: #FFF;
		
		
	}
	.topbg{
		height: 100px;
		widows: 100%;
		background-color: #F6F6F6 !important;
	}
	.top-50{
		margin-top:-80px;
	}
	.cu-list.menu>.bottom{
		position: fixed !important;
		width: 100%;
		bottom: 0;
		
	}
	.cu-list.menu>.cu-item {
		height: 48px;
		background-color: transparent !important;
		color: rgba(22, 118, 214, 0.62);
	}
	.border-top{
		border-top: 1rpx solid gray;
	}
	.line{
		border-top: 2rpx solid lightgray;
	}
	.result-list{
		background: #FE4C4C !important;
		box-shadow: 0px 3px 6px rgba(142, 228, 255, 0.12);
		opacity: 0.8;
		
	}
	.result-list>.cu-item {
		color: #FFFFFF !important;
	}
	
	.cu-list{
		background: rgba(113, 191, 251, 0.08);
		border-radius: 10px;
	}

	.panel{
		background: #FFF;
		padding: 5px 10px;
		border-radius: 6px;
	}
	.page.show {
		overflow: hidden;
	}
	.bottom-img{
		position: fixed;
		bottom: 0;
		height: 100px;
		width: 100%;
	}
	.bg{
		width: 100%;
	}
	.margin-bottom{
		margin-bottom: 120px;
	}
	.result{
		height: 48px;
		line-height: 48px;
		font-size: 14px;
		padding: 0 15px;
		color: #FFFFFF;
	}
	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}
</style>
